<template>
    <div class="orders">
        <search @on-result-click="resultClick" @on-change="getResult"
            placeholder="输入订单号搜索"
            :results="results" 
            v-model="q" 
            :auto-fixed="autoFixed" 
            @on-focus="onFocus" 
            @on-cancel="onCancel"
            @on-submit="onSubmit" 
            ref="search"></search>
        <div class="items-orders">
            <div v-for="(order, idx) in orders">
                <group>
                    <card style="border-radius: 2px">
                        <div slot="content" class="order-info" @click="order_detail(order.id)">
                            <div class="user-info">
                                <p class="user-name">
                                    <span class="name-text">{{order.name}}</span>
                                    <span class="no-text">
                                        <span class="text">单号:</span>
                                        <span class="number text">{{order.serial_number}}</span>
                                </span>
                            </p>
                            <div class="panel-text">
                                <span class="time"><span class="text">上门时间: </span>{{order.booking_date | time}}</span>
                                <span class="price"><span class="text">估价: </span>{{order.total | money}}</span>
                            </div>
                            <div class="order-process">
                                <cell>
                                    <span slot="icon" class="icon-22">&#xe649;</span>
                                    <span slot="title">订单性质</span>
                                    <span slot="value">
                                        <span class="order-type">{{order.mount_order | orderType}}</span>
                                        <span class="order-state">{{order.workflow_state | state}}</span>
                                    </span>
                                </cell>
                            </div>
                        </div>
                        <div class="order-info">
                            <cell>
                                <span slot="icon" class="icon-22">&#xe61b;</span>
                                <span slot="title">地址</span>
                                <span slot="value">{{order.province}} {{order.city}} {{order.area}}</span>
                            </cell>
                            <cell>
                                <span slot="icon" class="icon-22">&#xe64d;</span>
                                <span slot="title">基本参数</span>
                                <span slot="value">{{order.square}}m<sup>2</sup> | {{order.material}} | {{order.company_name ? order.company_name : "--"}} </span>
                            </cell>
                            <cell>
                                <span slot="icon" class="icon-22">&#xe613;</span>
                                <span slot="title">发单人</span>
                                <span slot="value">{{order.customer_name}}</span>
                            </cell>
                        </div>
                    </div>
                </card>
            </group>
            </div>
        </div>
        <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">
            <span slot="no-results">
                <divider>我是有底线的</divider>
            </span>
            <span slot="no-more">
                <divider>不要在扯了</divider>
            </span>

        </infinite-loading>
    </div>
</template>
<script>
    import {Card, Group, dateFormat, numberComma, Divider, Search, XButton, Cell} from 'vux'
import InfiniteLoading from 'vue-infinite-loading'
import {filter_state} from '../util.js'
export default {
    components: {
        Card,
            Group,
            InfiniteLoading,
            Divider,
            Search,
            XButton,
            Cell
    },
    data() {
        return {
            orders: [],
            page: {next_page: 0, current_page: 0},
            results: [],
            q: '',
            autoFixed: false,
            type: "all"
        }
    },
    filters: {
        time(val){
            return dateFormat(val * 1000, "YY-MM-DD")
        },
        money(val) {
            return numberComma(val, 3)
        },
            state(val) {
                return filter_state(val)
            },
            orderType(val) {
                if (val) {
                    return "安装单"
                } else {
                    return "测量/安装单"
                }
            }
    },
    watch: {
        '$route'(route){
            this.onInfinite("ref")
        }
    },
    created() {
        this.$store.commit("storeState", true)
        this.onInfinite("ref", "created") 
        this.type = this.$route.query.type
    },

    methods: {
        onInfinite(val, action) {
            if (val == "ref") {
                this.orders = [];
                this.page = {next_page: 0};
                if (action != "created") {
                    this.$refs.infiniteLoading.$emit("$InfiniteLoading:reset");
                }
            } else {
                this.$http.get("orders.json", {params: {page: this.page.next_page, limit: 10, type: this.$route.query.type}}).then(res => {
                    let data = res.data;
                    if(data.orders.length) {
                        this.orders = this.orders.concat(data.orders);
                        this.page = data.page;
                        this.$refs.infiniteLoading.$emit("$InfiniteLoading:loaded");
                        if (this.orders.length / 50 === 10 || data.page.next_page == null) {
                            this.$refs.infiniteLoading.$emit("$InfiniteLoading:complete");
                        } 
                    } else {
                        this.$refs.infiniteLoading.$emit("$InfiniteLoading:complete");
                    }
                })
            }
        },
            order_detail(id) {
                this.$router.push("orders/" + id + "?type=detail")
            },
            resultClick(item){
                let temp = item.title
                this.q = temp
                this.searchOrder(temp)
            },
            setFocus(){
                this.$refs.search.setFocus()
            },
            getResult(val){
                let arr = []
                let temp = tempValue().map((val) => {
                    let robj = {}
                    robj["title"] = val
                    arr.push(robj)
                    return robj
                })
                this.results = arr.reverse()
            },
            onSubmit(val){
                this.searchOrder(this.q, "search")
                this.$refs.search.isFixed = false
            },
            searchOrder(val, type="temp") {
                this.$http.get("search_orders.json", {params: {q: val}}).then(res => {
                    let data = res.data;
                    if (type == "search" && data.code == 200 && data.orders.length > 0) {
                        this.saveResult(this.q)
                    }
                    this.orders = data.orders;
                    this.page = data.page;
                })
            },
            onCancel(){
                this.onInfinite("ref")
            },
            onFocus(){},
            saveResult(val) {
                let rs = tempValue()
                if (rs.includes(val)) {
                    return
                }
                if (rs.length > 20) {
                    rs.shift()
                }
                rs.push(val)
                localStorage.setItem("results", JSON.stringify(rs));
            }
    }
}
function tempValue(){
    let rs = []
    let temp = localStorage.getItem("results")
    rs = JSON.parse(temp) ? JSON.parse(temp) : []
    let s = [...new Set(rs)]
    return s
}
</script>
<style>
    .order-info {
        padding: 5px;
    }
    .orders {
        margin-top: 12px;
        margin-bottom: 55px;
    }
    .no-text {
        float: right;
        margin-right: 2px;
    }
    .text {
        font-size: 14px;
        color: #909090;
    }
    .panel-text .time {
        margin-right: 5px;
    }
    .panel-text {
        font-size: 14px;
    }
    .price {
        color: red;
    }
    .order-info {
        font-size: 14px;
    }
    .order-info .icon-22 {
        margin-right: 4px;
    }
    .name-text {
        font-size: 15px;
        font-weight: bold;
    }
    .user-info {
        padding: 2px 5px;
    }
    .panel-text {
        padding: 5px 0px;
        clear: both;
    }
    .order-type, .order-state  {
        border-radius: 2px;
        padding: 4px 6px;
        color: #fff;
        font-size: 11px;
    }
    .order-type {
        background-color: #33ab70;
        margin-right: 4px;
    }
    .order-state {
        background-color: #d95353;
    }
   .order-info .weui-cell, .order-process .weui-cell {
        padding: 6px 2px;    
    }
</style>

